<template>
    <div>
        <el-form :model="depot" ref="form" label-width="120px" :rules="rules">
            <el-form-item label="仓库名称：" prop="name">
                <el-input v-model="depot.name" placeholder="请输入仓库名称"></el-input>
            </el-form-item>
            <el-form-item label="仓库地址：">
                <el-input v-model="depot.address" placeholder="请输入仓库地址"></el-input>
            </el-form-item>
            <el-form-item label="仓储费：">
                <el-input v-model="depot.warehousing" placeholder="请输入仓储费"></el-input>
            </el-form-item>
            <el-form-item label="搬运费：">
                <el-input v-model="depot.truckage" placeholder="请输入搬运费"></el-input>
            </el-form-item>
            <el-form-item label="负责人：">
                <el-select v-model="depot.principal" placeholder="请选择负责人">
                    <el-option v-for="item in users" :key="item.id" :label="item.username"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input v-model="depot.sort" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input
                    v-model="depot.remark"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="请输入备注"
                />
            </el-form-item>
            <el-row :gutter="20" style="height: 30px">
                <el-col :span="24" :offset="0">
                    <el-form-item style="float: right;">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="onSubmit(form)">确定</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script setup>
import {defineEmits,defineProps, ref} from 'vue'
import request from '@/api/request'
import { ElMessage } from 'element-plus';

let emits = defineEmits(['close'])
let props = defineProps(['data'])

let form = ref()

//校验规则
let rules = {
    name:[
        { required: true, message: '请输入仓库名称!', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ]
}

//操作员
let users = ref([])

//查询操作员
let findusers = () =>{
    request({
        url:'/user/user',
        method: 'get'
    }).then(resp =>{
        users.value = resp.data
    })
}
findusers();

let depot = ref({...props.data})

let onSubmit =(formEl)=>{
    formEl.validate(valid =>{
        if(valid) {
            request.put("/basic/depot/update", depot.value,{
                body: JSON.stringify(depot.value)
            }).then(resp=>{
                ElMessage.success(resp.data)
                emits('close')
            }).catch((err)=>{
                ElMessage.error(err)
            })
        }
    })
}

let close = ()=>{
    emits('close')
}

</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 350px;
}
</style>
